<template>
	<div>
		<ma-body>
			<div slot="header">
				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap.stop="toBackC"></image>
				<!-- 顶部标题 -->
				<div class="collectionTop">
					<div class="line"></div>
					<div class="topTitle">
						<p>我的藏品</p>
						<span>MY COLLECTION</span>
					</div>
				</div>
				<!-- 顶部导航栏 -->
				<scroll-view scroll-x="true" style="white-space: nowrap;">
					<div class="topTag">
						<div class="tagBox" v-for="(item,index) in list" :class="{'active':currentIndex==index}"
							@click="toTag(index)">
							<image :src="item.pic1" mode="aspectFill" v-if="currentIndex==index"></image>
							<image :src="item.pic2" mode="aspectFill" v-else></image>
							<span>{{item.name}}
								<block v-if="countList[index]">·{{ countList[index] }}</block>
							</span>
		
						</div>
					</div>
				</scroll-view>
			</div>
			<div slot="content" class="content">
				<div class="seat" v-if="forList.length == 0">
					<div class="yuan"></div>
				</div>
				<div class="swiper" style="width: 100%;height: 100%;">
					<swiper :current="currentIndex" @change="swiperChange">
						<swiper-item>
							<ma-refresh pageName="page0" v-if="page0.list.length != 0">
								<div id="cangping">
									<cangping v-for="item in page0.list" :item="item"></cangping>
								</div>
							</ma-refresh>
							<div class="img-box" style="height: 100%;width: 100$;display: flex;" v-else>
								<image src="@/static/img/noProduct.png" mode="aspectFill" style="width: 42.67vw;height: 42.67vw;background: transparent;"></image>
							</div>
						</swiper-item>
						<swiper-item> 
							<ma-refresh pageName="page1" v-if="page1.list.length != 0">
								<div id="manghe">
									<manghe v-for="item in page1.list" :item="item" @atOpen="atOpen"></manghe>
								</div>
							</ma-refresh>
							<div class="img-box" style="height: 100%;width: 100$;display: flex;" v-else>
								<image src="@/static/img/noProduct.png" mode="aspectFill" style="width: 42.67vw;height: 42.67vw;background: transparent;"></image>
							</div>
						</swiper-item>
						<swiper-item>
							<div class="img-box" style="height: 100%;width: 100$;display: flex;">
								<image src="@/static/img/noProduct.png" mode="aspectFill" style="width: 42.67vw;height: 42.67vw;background: transparent;"></image>
							</div>
						</swiper-item>
					</swiper>
				</div>
			</div>
		</ma-body>
		<mangheAnimate ref="mangheAnimate" @open="nowOpen"></mangheAnimate>
	</div>
</template>

<script>
	import Refresh from '@/$ma/common/js/refresh.js';
	import cangping from '../../components/cangping/cangping';
	import manghe from '../../components/manghe/manghe';
	import mangheAnimate from '../../components/mangheAnimate/mangheAnimate';
	export default {
		components: {
			cangping,
			manghe,
			mangheAnimate
		},
		data() {
			return {
				list: [{
						name: '数字藏品',
						pic1: '../../../static/img/tabbar/index1.png',
						pic2: '../../../static/img/tabbar/index2.png'
					},
					{
						name: '盲盒',
						pic1: '../../../static/img/manghe.png',
						pic2: '../../../static/img/mangheNo.png'
					},
					{
						name: '抽签记录',
						pic1: '../../../static/img/manghe.png',
						pic2: '../../../static/img/chouqianNo.png'
					},
				],
				forList: [1, 2, 3, 4, 5, 6],
				currentIndex: 0,
				height: 0,
				collectionTags: {},
				page0: new Refresh(this, {
					apiName: 'getCollectionList',
					apiData: {
						tag: "collection"
					},
					objectName: 'collectionId'
				}),
				page1: new Refresh(this, {
					apiName: 'getCollectionList',
					apiData: {
						tag: "blind_box"
					},
					objectName: 'collectionId'
				}),
				countList: ['', ''],
				selectItem: {},
				item: {}
			}
		},
		methods: {
			async toTag(index) {
				this.currentIndex = index;
				await uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				this[`page${index}`].onRefresh();
			},
			swiperChange(e) {
				this.currentIndex = e.detail.current;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				this[`page${e.detail.current}`].onRefresh();
			},
			async getCollectionTags() {
				this.$u.api.getCollectionTags().then(res => {
					this.countList[0] = res.collection.count;
					this.countList[1] = res.blind_box.count;
				});
			},
			atOpen(item){
				this.$refs.mangheAnimate.open({
					item: item
				})
				// this.item.collection.blindBoxStatus == 'opened'
			},
			async nowOpen(item){
				let id = item.collectionId;
				uni.$emit('isOpen',id)
					// this.page1.list = [];
					await this.getCollectionTags();
					await this.page1.onRefresh();
			},
			toBackC(){
				console.log(233)
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			}
		},
		async onLoad(e) {
			if(e.currentIndex) this.currentIndex = e.currentIndex;
			this.getCollectionTags();
			this.page0.onRefresh();
			this.page1.onRefresh();
		},
		onShow() {
			// this[`page${e.currentIndex}`].onRefresh();
		},
		mounted() {
			// this.$on("nowOpen",(val)=>{
			// 	console.log(val)
			// })
		}
	}
</script>

<style lang="scss">
	/deep/.img-box{
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.pet-body{
		overflow: hidden;
	}
	.content{
		height: 100%;
	}
	swiper{
		height: 100%;
	}
	.topTag {
		width: 120vw;
		display: flex;
		flex-direction: row;
		margin-left: 4.27vw;
		overflow: hidden;

		.tagBox {
			display: flex;
			flex-direction: row;
			align-items: center;
			color: #555555;
			font-weight: 300;
			padding: 2.93vw 5.33vw 2.93vw 4.27vw;
			margin: 12.8vw 2.13vw 0 0;
			border-radius: 6.13vw;
			border: 1px solid #1b1b1b;

			image {
				width: 6.4vw;
				height: 6.4vw;
				margin-right: 1.07vw;
			}
		}

		// 选中
		.active {
			color: #FFFFFF;
			background-color: #1b1b1b;
		}
	}

	// 顶部标题
	.collectionTop {
		display: flex;
		flex-direction: row;
		padding: 17.07vw 0 0 5.33vw;

		.line {
			width: 1.07vw;
			height: 17.07vw;
			background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
			margin-right: 3.2vw;
		}

		.topTitle {
			height: 17.07vw;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			p {
				font-size: 8vw;
				font-weight: 500;
				color: #FFFFFF;
			}

			span {
				font-size: 4.27vw;
				font-weight: 300;
				color: #555555;
			}
		}
	}

	// 顶部导航栏
	.swiper {
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 0 4.27vw;
		margin-top: 1.6vw;

		swiper-item {
			// height: 100%;
		}

		.c_detail {
			width: 91.47vw;
			height: 41.6vw;
			border-radius: 6.4vw;
			background-color: #1b1b1b;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 4.27vw 0 2.13vw;
			margin-bottom: 2.67vw;

			.c_pic {
				width: 37.33vw;
				height: 37.33vw;
				// border-radius: 6vw 0 0 6vw;
				border-radius: 6vw;
				margin-right: 3.2vw;
				overflow: hidden;

				image {
					width: 37.33vw;
					height: 37.33vw;
				}
			}

			.c_right {
				width: 44.53vw;
				height: 37.33vw;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.rightSon {
					.title {
						font-size: 4.27vw;
						font-weight: 500;
						color: #FFFFFF;
						margin-bottom: 1.07vw;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}

					.type {
						border: 1px solid #A972FF;
						padding: 0 1.07vw 0.27vw 1.07vw;
						font-size: 2.67vw;
						font-weight: 300;
						color: #A972FF;
						border-radius: 1.07vw;
					}
				}

				.right_div {
					width: 44.53vw;
					height: 4.27vw;
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					.right_button {
						width: 24.53vw;
						height: 4.27vw;
						background-color: #323232;
						border-radius: 1.07vw;
						display: flex;
						flex-direction: row;
						align-items: center;

						image {
							width: 8.8vw;
							height: 4.27vw;
							border-radius: 1.07vw;
						}

						span {
							padding: 0 1.07vw;
							font-size: 2.67vw;
							color: #FFCE80;
							font-weight: 300;
						}
					}

					.logo {
						width: 4.27vw;
						height: 4.27vw;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 4.27vw;
							height: 4.27vw;
						}
					}
				}
			}
		}
	}

	.seat {
		width: 100vw;
		height: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;

		.yuan {
			width: 53.33vw;
			height: 53.33vw;
			background-color: #1b1b1b;
			border-radius: 50%;
		}
	}
</style>
